1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
| <html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--引入vue.js-->
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
请输入要显示的列表: <input type="text" v-model="inputValue"></input> <!-- 使用v-model进行数据的双向绑定 -->
<button v-on:click="submitBtn">确认</button> <!-- 使用v-on:click定义一个onclick点击事件 -->
<ul>
<!-- <li v-for="item in list_data">{{ item }}</li> 之前是使用v-for循环出数据，现在我们用组件的方式实现 -->
<todo-item v-bind:content="item" v-for="item in list_data"> </todo-item>
<!-- todo-item是我们定义的组件，下面定义的名称是TodoItem，我们要使用-将驼峰分开。内容是组件中定义的template，循环的次数受
list_data的影响。使用v-bind将list_data每个item的数据通过content传递到组件内 -->
</ul>
</div>
<script type="text/javascript">
// 局部组件
var TodoItem = {
props:['content'], //使用props来接受组件外传来的参数，其中content就是传来的
template:"<li> {{ content }} </li>" //显示传来的内容
}
var app = new Vue({ // 实例化一个Vue
el: "#app", // 使用el绑定
data :{
"list_data": ["1111", '2222', '3333'], // 初始赋值
"inputValue" : ""
},
methods:{
submitBtn: function(){ // 定义一个onclick点击方法
// alert(this.inputValue) // 取到文本框中绑定的值
this.list_data.push(this.inputValue) // 将文本框中输入值放入到循环显示的列表中
this.inputValue = "" // 将文本框清空
}
},
components:{ // 注册局部组件
TodoItem:TodoItem
}
})
</script>
</body>
</html>
|